<template>
  <a-layout-header class="iceosft-header">
    <div class="d-flex align-center justify-space-between">
      <div>
        <menu-unfold-outlined
            v-if="collapse"
            class="trigger"
            @click="settingStore.changeCollapse"
        />
        <menu-fold-outlined v-else class="trigger" @click="settingStore.changeCollapse"/>
      </div>
      <a-space class="px-4">
        <a-tooltip>
          <template #title>退出登录</template>
          <a-button link @click="userStore.logout()" type="text" :icon="h(LogoutOutlined)">
          </a-button>
        </a-tooltip>

      </a-space>
    </div>
  </a-layout-header>
</template>

<script setup lang="ts">
import {LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons-vue";
import {useSettingStore} from "~/store/modulers/setting";
import {storeToRefs} from "pinia";
import {useUserStore} from "~/store/modulers/user";
import {useRoute} from "vue-router";
import {computed, h} from "vue";

const settingStore = useSettingStore();
const {dark} = storeToRefs(settingStore);
const {collapse} = storeToRefs(settingStore);
const userStore = useUserStore();

const route = useRoute();
const key = computed(() => {
  return route.path + Math.random();
});


function changeDark(isDark: boolean) {
  dark.value = isDark;
}
</script>

<style scoped lang="scss">
.iceosft-header {
  background: #fff;
  padding: 0;
  height: 48px;
  line-height: 48px !important;
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);

  .trigger {
    height: 48px;
    font-size: 18px;
    padding: 0 24px;
    cursor: pointer;
    transition: color, background-color 0.2s;

    &:hover {
      background: rgba(8, 8, 8, 0.07);
    }
  }
}
</style>
